<template>
  <div class="monitor-container">
    <el-card>
      <template #header>
        <div class="card-header">
          <span>数据监控</span>
          <el-button type="primary" @click="refreshData">
            <el-icon><Refresh /></el-icon>
            刷新
          </el-button>
        </div>
      </template>
      
      <div class="monitor-content">
        <el-row :gutter="20">
          <el-col :span="6">
            <el-card class="stat-card" shadow="hover">
              <el-statistic title="今日处理量" :value="12345" />
              <div class="stat-trend trend-up">
                <el-icon><ArrowUp /></el-icon>
                +12.5%
              </div>
            </el-card>
          </el-col>
          
          <el-col :span="6">
            <el-card class="stat-card" shadow="hover">
              <el-statistic title="成功率" :value="98.5" suffix="%" />
              <div class="stat-trend trend-stable">
                <el-icon><Minus /></el-icon>
                0.2%
              </div>
            </el-card>
          </el-col>
          
          <el-col :span="6">
            <el-card class="stat-card" shadow="hover">
              <el-statistic title="异常数量" :value="23" />
              <div class="stat-trend trend-down">
                <el-icon><ArrowDown /></el-icon>
                -5.1%
              </div>
            </el-card>
          </el-col>
          
          <el-col :span="6">
            <el-card class="stat-card" shadow="hover">
              <el-statistic title="平均处理时间" :value="2.3" suffix="秒" />
              <div class="stat-trend trend-up">
                <el-icon><ArrowUp /></el-icon>
                +0.3s
              </div>
            </el-card>
          </el-col>
        </el-row>
        
        <el-divider />
        
        <div class="monitor-charts">
          <el-row :gutter="20">
            <el-col :span="12">
              <el-card title="数据处理趋势">
                <template #header>
                  <span>数据处理趋势</span>
                </template>
                <div class="chart-placeholder">
                  <el-icon size="64" color="#909399">
                    <TrendCharts />
                  </el-icon>
                  <p>数据处理趋势图表</p>
                </div>
              </el-card>
            </el-col>
            
            <el-col :span="12">
              <el-card title="渠道状态分布">
                <template #header>
                  <span>渠道状态分布</span>
                </template>
                <div class="chart-placeholder">
                  <el-icon size="64" color="#909399">
                    <PieChart />
                  </el-icon>
                  <p>渠道状态分布图表</p>
                </div>
              </el-card>
            </el-col>
          </el-row>
        </div>
        
        <el-divider />
        
        <div class="recent-alerts">
          <h3>最近告警</h3>
          <el-table :data="alertData" style="width: 100%">
            <el-table-column prop="time" label="时间" width="180" />
            <el-table-column prop="type" label="类型" width="120">
              <template #default="{ row }">
                <el-tag :type="row.tagType" size="small">{{ row.type }}</el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="message" label="消息" />
            <el-table-column prop="status" label="状态" width="100">
              <template #default="{ row }">
                <el-tag :type="row.status === '已处理' ? 'success' : 'warning'" size="small">
                  {{ row.status }}
                </el-tag>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { Refresh, ArrowUp, ArrowDown, Minus, TrendCharts, PieChart } from '@element-plus/icons-vue'

const alertData = ref([
  {
    time: '2024-01-15 14:30:25',
    type: '异常',
    tagType: 'danger' as const,
    message: '上游渠道A连接超时',
    status: '未处理'
  },
  {
    time: '2024-01-15 13:45:10',
    type: '警告',
    tagType: 'warning' as const,
    message: '数据处理成功率低于阈值',
    status: '已处理'
  },
  {
    time: '2024-01-15 12:20:15',
    type: '信息',
    tagType: 'info' as const,
    message: '系统性能指标正常',
    status: '已处理'
  }
])

const refreshData = () => {
  // 刷新数据的逻辑
  console.log('刷新监控数据')
}
</script>

<style scoped>
.monitor-container {
  padding: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: bold;
  color: #303133;
}

.monitor-content {
  padding: 20px 0;
}

.stat-card {
  text-align: center;
  margin-bottom: 20px;
}

.stat-trend {
  margin-top: 10px;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
}

.trend-up {
  color: #67C23A;
}

.trend-down {
  color: #F56C6C;
}

.trend-stable {
  color: #909399;
}

.monitor-charts {
  margin: 20px 0;
}

.chart-placeholder {
  height: 300px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: #f8f9fa;
  border-radius: 4px;
  color: #909399;
}

.chart-placeholder p {
  margin-top: 10px;
  font-size: 14px;
}

.recent-alerts {
  margin-top: 30px;
}

.recent-alerts h3 {
  margin-bottom: 20px;
  color: #